<template>
	<div class="global-layout-vue">
		<el-container>
			<el-aside v-show="leftCollapse" :style="{ width: rightAsideWidth + 'px' }">
				<div style="padding: 10px;height: 100%;box-sizing: border-box;background: #fafafa;">
					<div style="margin-bottom: 5px">
						<el-select :model-value="choiceSpace" filterable placeholder="选择空间" style="width: 100%" @change="spaceChangeEvents">
							<el-option-group label="">
								<el-option :key="0" label="创建空间" :value="0"></el-option>
								<el-option :key="-1" label="空间管理" :value="-1"></el-option>
							</el-option-group>
							<el-option-group label=""></el-option-group>
							<el-option v-for="item in spaceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</div>
					<el-autocomplete v-model="searchKeywords" :fetch-suggestions="doSearchByKeywords" placeholder="在当前空间搜索" popper-class="search-autocomplete" style="width: 100%; margin: 10px 0" @select="handleSearchKeywordsSelect">
						<template v-slot="{ item }">
							<div class="search-option-item">
								<div class="title">
									<span v-html="item.pageTitle || '-'"></span>
								</div>
								<span class="content" v-html="item.previewContent || '-'"></span>
							</div>
						</template>
					</el-autocomplete>
					<div class="space-folder-box">
						<el-tooltip style="margin: 4px" effect="dark" :content="descriptorForTree" placement="top">
							<span  style="color:#888;font-size: 12px;cursor: pointer" @click="changeDropWownStatus">空间目录</span>
						</el-tooltip>
						<AddMenu
								:choiceSpace="choiceSpace+''"
								:choosePageId="choosePageId+''"
								:nowPageId = "nowPageId+''"
								:funcId = "'0'"
								@choosePageIdFunc="choosePageIdFunc"
								@doGetPageList="doGetPageList"
						/>
					</div>
					<div class="wiki-page-tree-box">
						<el-tree
								:class="explanClass"
								ref="wikiPageTreeRef"
								:current-node-key="nowPageId"
								:data="wikiPageList"
								:default-expanded-keys="wikiPageExpandedKeys"
								:expand-on-click-node="true"
								:filter-node-method="filterPageNode"
								:props="defaultProps"
								draggable
								highlight-current
								node-key="id"
								style="background-color: #fafafa"
								@node-click="handleNodeClick"
								@node-expand="handleNodeExpand"
								@node-drop="handlePageDrop">
							<template v-slot="{ node, data }">
								<div class="page-tree-node" @mouseover="changeNodeOptionStatus(data) ">
									<div style="width: calc(100% - 30px);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
										<!--图标-->
										<el-icon  v-if="data.editorType === 0" class="clickAddIcon" style="margin-right: 5px;vertical-align: middle;">
											<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M5 8C5 6.89543 5.89543 6 7 6H19L24 12H41C42.1046 12 43 12.8954 43 14V40C43 41.1046 42.1046 42 41 42H7C5.89543 42 5 41.1046 5 40V8Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M43 22H5" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M5 16V28" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M43 16V28" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
										</el-icon>
										<el-icon  v-else-if="data.editorType === 1" class="clickAddIcon" style="margin-right: 5px;vertical-align: middle;">
											<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><rect x="6" y="6" width="36" height="36" rx="3" fill="none" stroke="currentColor" stroke-width="4"></rect><path d="M14 16L18 32L24 19L30 32L34 16" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
										</el-icon>
										<el-icon v-else-if="data.editorType === 2" class="clickAddIcon" style="margin-right: 5px;vertical-align: middle;">
											<el-icon-document/>
										</el-icon>
										<!--标题-->
										<a-input v-if="data.renaming" v-model:value="data.name" class="rename-input" placeholder="请输入文档名称" @blur="doRename(node,data)" @click.stop/>
										<span v-else style="vertical-align: middle;">
											<el-tooltip :content="node.label" placement="top-start" :show-after="1000">{{ node.label }}</el-tooltip>
										</span>
										<!--操作-->
										<div class="page-action-box" :class="data.renaming?'renaming':''" @click.stop>
											<AddMenu
													:choiceSpace="choiceSpace+''"
													:choosePageId="choosePageId+''"
													:nowPageId = "nowPageId+''"
													:funcId = "data.id+''"
													@choosePageIdFunc="choosePageIdFunc"
													@doGetPageList="doGetPageList"
											/>
											<a-dropdown :trigger="['click']" @click="choosePageIdFunc(data.id)">
												<el-button :icon="MoreFilled" text class="page-action-dropdown-btn"></el-button>
												<template #overlay>
													<a-menu>
														<a-menu-item key="0" @click="rename(node,data)">
															<el-icon  class="clickAddIcon" style="margin-right: 5px">
																<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M42 26V40C42 41.1046 41.1046 42 40 42H8C6.89543 42 6 41.1046 6 40V8C6 6.89543 6.89543 6 8 6L22 6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14 26.7199V34H21.3172L42 13.3081L34.6951 6L14 26.7199Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path></svg>
															</el-icon>
															重命名
														</a-menu-item>
														<a-menu-item key="1" @click="deleteWikiPage">
															<el-icon  class="clickAddIcon" style="margin-right: 5px">
																<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M9 10V44H39V10H9Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M20 20V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 20V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 10H44" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path></svg>
															</el-icon>
															删除
														</a-menu-item>
													</a-menu>
												</template>
											</a-dropdown>
										</div>
									</div>
								</div>
							</template>
						</el-tree>
					</div>
				</div>
			</el-aside>
			<RightResize v-show="leftCollapse" v-model:value="rightAsideWidth" @change="rightAsideWidthChange"></RightResize>
			<el-container>
				<el-header>
					<el-row>
						<el-col :span="12">
							<el-button @click="turnLeftCollapse" v-if="leftCollapse" text :icon="ElIconFold" class="fold-btn"></el-button>
							<el-button @click="turnLeftCollapse" v-else text :icon="ElIconExpand" class="fold-btn"></el-button>
						</el-col>
						<el-col :span="12" style="text-align: right;">
							<span class="header-right-user-name">{{userSelfInfo.userName}}</span>
							<el-popover v-model:visible="userMessagePopVisible" placement="bottom" trigger="click" width="600">
								<template v-slot:reference>
									<el-badge :is-dot="haveNotReadUserMessage" style="margin: 0 20px">
										<el-icon class="head-icon" style="margin-right: 0">
											<el-icon-bell/>
										</el-icon>
									</el-badge>
								</template>
								<div style="margin-bottom: 10px">
									<span style="font-size: 14px; font-weight: bold">通知</span>
									<el-link v-if="haveNotReadUserMessage" :icon="ElIconCheck" style="float: right" type="primary" @click="readAllUserMessage">本页标记已读</el-link>
								</div>
								<div class="header-user-message">
									<el-table :data="userMessageList" border max-height="500" size="small" style="width: 100%; margin-bottom: 5px">
										<el-table-column label="操作人" prop="operatorUserName" width="100px"></el-table-column>
										<el-table-column label="操作时间" prop="creationTime" width="140px"></el-table-column>
										<el-table-column label="内容">
											<template v-slot="scope">
												{{ scope.row.msgContent }}
												<el-badge :is-dot="scope.row.msgStatus == 0" style="line-height: 10px; padding-right: 5px">
													<el-link type="primary" @click="showUserMessage(scope.row)">查看</el-link>
												</el-badge>
											</template>
										</el-table-column>
									</el-table>
									<div class="page-info-box">
										<el-pagination
												:current-page="userMsgParam.pageNum"
												:page-size="userMsgParam.pageSize"
												:total="userMsgTotalCount"
												layout="prev, pager, next, total"
												@current-change="handleCurrentChange">
										</el-pagination>
									</div>
								</div>
							</el-popover>
							<el-dropdown trigger="click" @command="userSettingDropdown" style="vertical-align: middle;">
								<el-icon class="head-icon">
									<el-icon-setting/>
								</el-icon>
								<template v-slot:dropdown>
									<el-dropdown-menu>
										<el-dropdown-item command="console">控制台</el-dropdown-item>
										<el-dropdown-item command="aboutDoc">关于</el-dropdown-item>
										<el-dropdown-item command="userSignOut" divided>退出登录</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</el-col>
					</el-row>
				</el-header>
				<el-main style="padding: 0; border-left: 1px solid #dcdfe6">
					<router-view
							v-slot="{ Component }"
							:spaceId="choiceSpace"
							:spaceInfo="getSpaceInfo(choiceSpace)"
							@changeExpandedKeys="changeWikiPageExpandedKeys"
							@loadPageList="loadPageList"
							@loadSpace="loadSpaceList"
							@switchSpace="switchSpacePage">
						<component :is="Component"></component>
					</router-view>
				</el-main>
			</el-container>
		</el-container>
		<create-space ref="createSpaceRef" @success="loadSpaceList"></create-space>
		<about-dialog ref="aboutDialogRef"></about-dialog>
	</div>
</template>

<script setup>
	import {
		Document as ElIconDocument,
		Fold as ElIconFold,
		Expand as ElIconExpand,
		Upload as ElIconUpload,
		Bell as ElIconBell,
		Setting as ElIconSetting,
		Plus as ElIconPlus,
		Check as ElIconCheck,
		MoreFilled,
	} from '@element-plus/icons-vue'
	import {onBeforeUnmount, toRefs, ref, reactive, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
	import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
	import {ElMessageBox, ElMessage} from 'element-plus'
	import userApi from '../../assets/api/user'
	import pageApi from '../../assets/api/page'
	import CreateSpace from '../space/CreateSpace'
	import RightResize from './RightResize.vue'
	import AddMenu from './AddMenu.vue'
	import AboutDialog from '../../views/common/AboutDialog'
	import {useStoreDisplay} from '@/store/wikiDisplay.js'
	import {useStoreUserData} from "@/store/userData";
	import {useStorePageData} from "@/store/pageData";
	import { defineComponent } from 'vue';
	import { DownOutlined } from '@ant-design/icons-vue';
	import axios from "axios";

	let route = useRoute();
	let router = useRouter();
	let storePage = useStorePageData();
	let storeDisplay = useStoreDisplay();

	let leftCollapse = ref(true);
	let rightContentLoading = ref(false);
	let pathIndex = ref([]);
	let defaultProps = ref({children: 'children', label: 'name',});
	// 空间搜索相关
	let spaceOptions = ref([]);
	let spaceList = ref([]);
	let choiceSpace = ref('');
	let nowSpaceShow = ref({});
	let nowPageId = ref('');
	// 依据目录树存储的map全局对象
	let treePathDataMap = ref(new Map());
	// 搜索的输入内容
	let searchKeywords = ref('');
	// 页面展示相关
	let wikiPageList = ref([]);
	let wikiPage = ref({});
	let wikiPageExpandedKeys = ref([]);
	let userSelfInfo = ref({});
	let userMessageList = ref([]);
	let haveNotReadUserMessage = ref(false);
	let userMessagePopVisible = ref(false);
	let userMsgTotalCount = ref(0);
	let userMsgParam = ref({sysType: 2, pageNum: 1, pageSize: 20,});
	let rightAsideWidth = ref(300);
	let optionPageId = ref('');
	let descriptorForTree = ref("点击收起目录");
	let explan = ref(false);
	let explanClass = ref("el-tree");
	let choosePageId = ref('');

	onMounted(() => {
		loadSpaceList()
		loadUserMessageList()
		getSelfUserInfo()
	});

	const deleteWikiPage = () => {
		ElMessageBox.confirm('确定要删除此页面及其所有子页面吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(() => {
			let param = {pageId: optionPageId.value};
			pageApi.pageDelete(param).then(() => {
				ElMessage.success('已删除')
				doGetPageList(null)
			});
		}).catch(() => {});
	}

	const choosePageIdFunc = (id) => {
		choosePageId.value = id
	}
	const rename = (node,data) => {
		data.renaming = true
	}
	const doRename = (node,data) => {
		pageApi.renamePage({"id": data.id,"name": data.name})
				.then((json) => {
					doGetPageList(null)
					ElMessage.success('重命名成功')
					data.renaming = false
				})

	}
	const changeDropWownStatus = () => {
		if(explan.value){
			explanClass.value = "el-tree"
			descriptorForTree.value ="点击收起目录"
			explan.value = false
		}else {
			explanClass.value = "hidTree"
			descriptorForTree.value ="点击展开目录"
			explan.value = true
		}
	}
	const loadPageList = (param) => {
		param = param || {}
		doGetPageList(param.parentId, param.node)
	}


	const changeNodeOptionStatus = (param) => {
		optionPageId.value = param.id
	}
	const turnLeftCollapse = () => {
		leftCollapse.value = !leftCollapse.value
		setTimeout(() => {
			if (leftCollapse.value) {
				rightAsideWidthChange(rightAsideWidth.value + 1)
			} else {
				rightAsideWidthChange(1)
			}
		}, 100)
	}

	const changeWikiPageExpandedKeys = (pageId) => {
		// 展开没有触发子节点的加载，如果去加载子节点有还找不到当前的node，暂不展开
		// wikiPageExpandedKeys.value= [pageId];
	}
	const doSearchByKeywords = (queryString, callback) => {
		if (!queryString || !queryString.trim()) {
			callback([])
			return
		}
		pageApi
				.pageNews({spaceId: choiceSpace.value, keywords: queryString})
				.then((json) => {
					let spacePageNews = json.data || []
					callback(spacePageNews)
				})
	}
	const handleSearchKeywordsSelect = (item) => {
		searchKeywords.value = ''
		router.push({path: '/page/show', query: {pageId: item.pageId}})
	}
	let wikiPageTreeRef = ref();
	const searchByKeywords = () => {
		wikiPageTreeRef.value.filter(searchKeywords.value)
	}
	const searchByKeywordsNewPage = () => {
		var routeUrl = router.resolve({
			path: '/page/search',
			query: {keywords: searchKeywords.value}
		})
		window.open(routeUrl.href, '_blank')
	}
	const handleNodeClick = (data) => {
		//console.log('点击节点：', data, nowPageId.value)

		nowPageId.value = data.id
		if (data.editorType !== 0) {
			router.push({path: '/page/show', query: {pageId: data.id}})
		}
		handleNodeExpand(data)
	}
	const handleNodeExpand = (node) => {

		if (
				node.children &&
				node.children.length > 0 &&
				node.children[0].needLoad
		) {
			console.log('加载节点：', node)
			doGetPageList(node.id, node)
		}
	}
	const handlePageDrop = (draggingNode, dropNode, dropType, ev) => {

		console.log('tree drop: ', draggingNode.data, dropNode.data, dropType)
		// 'prev'、'inner'、'next'
		// before、after、inner
		var param = {id: draggingNode.data.id, parentId: dropNode.data.parentId}
		if (dropType == 'inner') {
			param.parentId = dropNode.data.id
		} else if (dropType == 'before') {
			param.beforeSeq = dropNode.data.seqNo
		} else if (dropType == 'after') {
			param.afterSeq = dropNode.data.seqNo
		}
		pageApi.pageChangeParent(param).then((res) => {
			doGetPageList(null)
		})
	}
	const loadUserMessageIfPopVisible = () => {
		if (!userMessagePopVisible.value) {
			loadUserMessageList()
		}
	}
	const loadUserMessageList = () => {
		userApi.getUserMessageList(userMsgParam.value).then((res) => {
			userMessageList.value = res.data || []
			userMsgTotalCount.value = res.total || 0
			haveNotReadUserMessage.value =
					userMessageList.value.filter((item) => item.msgStatus == 0).length > 0
		})
	}
	const showUserMessage = (row) => {
		if (row.msgStatus == 0) {
			userApi.readUserMessage({ids: row.id}).then(() => {
				loadUserMessageList()
			})
		}
		if (row.msgType >= 2 && row.msgType <= 12) {
			router.push({path: '/page/show', query: {pageId: row.dataId}})
			userMessagePopVisible.value = false
		}
	}
	const readAllUserMessage = () => {
		let msgIds = []
		userMessageList.value
				.filter((item) => item.msgStatus == 0)
				.forEach((item) => {
					msgIds.push(item.id)
				})
		if (msgIds.length <= 0) return
		userApi.readUserMessage({ids: msgIds.join(',')}).then(() => {
			ElMessage.success('标记成功')
			loadUserMessageList()
		})
	}
	const handleCurrentChange = (val) => {
		userMsgParam.value.pageNum = val
		loadUserMessageList()
	}
	const filterPageNode = (value, data) => {
		if (!value || !data.name) return true;
		// issues:I2CG72 忽略大小写
		let name = data.name.toLowerCase();
		return name.indexOf(value.toLowerCase()) !== -1;
	}
	let createSpaceRef = ref();
	const spaceChangeEvents = (data) => {
		if (data === 0) {
			// 新建空间
			createSpaceRef.value.show();
		} else if (data === -1) {
			// 管理空间
			router.push({path: '/space/manage'});
		} else {
			nowPageId.value = '';
			choiceSpace.value = data;
			nowSpaceShow.value = spaceList.value.find((item) => item.id === data);
			storePage.spaceInfo = nowSpaceShow.value;
			doGetPageList(null);
			router.push({path: '/home', query: {spaceId: data}});
		}
	}
	const loadSpaceList = (spaceId) => {
		pageApi.spaceList({}).then((json) => {
			spaceList.value = json.data || [];
			let spaceOptionsNew = [];
			spaceList.value.forEach((item) => spaceOptionsNew.push({label: item.name, value: item.id}));
			spaceOptions.value = spaceOptionsNew;
			if (spaceList.value.length > 0) {
				let nowSpaceId = spaceId;
				let nowSpaceShowTemp = spaceList.value.find((item) => item.id === spaceId);
				if (!nowSpaceShowTemp) {
					nowSpaceShowTemp = spaceList.value[0];
					nowSpaceId = nowSpaceShowTemp.id;
				}
				nowSpaceShow.value = nowSpaceShowTemp;
				storePage.spaceInfo = nowSpaceShowTemp;
				choiceSpace.value = nowSpaceId;
				nowPageId.value = '';
				doGetPageList(null);
				// TODO 在首页时跳转
				try {
					if (route.path === '/home') {
						router.push({path: '/home', query: {spaceId: nowSpaceId}});
					}
				} catch (e) {
					console.log(e);
				}
			}
		})
	}
	const doGetPageList = (parentId, node) => {
		let param = {spaceId: choiceSpace.value}
		pageApi.pageList(param).then((json) => {
			wikiPageList.value = json.data || []
			// 设置默认选中效果
			nextTick(() => {
				nowPageId.value = route.query.pageId
				if (nowPageId.value) {
					wikiPageTreeRef.value.setCurrentKey(nowPageId.value)
				}
			})
		})
	}
	let aboutDialogRef = ref();
	const userSettingDropdown = (command) => {
		console.log('command:' + command)
		if (command == 'userSignOut') {
			userSignOut()
		} else if (command == 'aboutDoc') {
			aboutDialogRef.value.show()
		} else if (command == 'myInfo') {
			router.push({path: '/user/myInfo'})
		} else if (command == 'console') {
			window.open(import.meta.env.VITE_APP_BASE_API, '_blank')
		} else {
			ElMessage.warning('暂未开放')
		}
	}
	const userSignOut = () => {
		userApi.userLogout().then(() => {
			location.reload()
		})
	}
	let storeUser = useStoreUserData();
	const getSelfUserInfo = () => {
		userApi.getSelfUserInfo().then((json) => {
			userSelfInfo.value = json.data;
			storeUser.userInfo = json.data;
		})
	}
	const getSpaceInfo = (spaceId) => {
		for (let i = 0; i < spaceList.value.length; i++) {
			if (spaceList.value[i].id == spaceId) {
				return spaceList.value[i]
			}
		}
		return {}
	}
	const switchSpacePage = (spaceId) => {
		spaceId = parseInt(spaceId)
		if (choiceSpace.value == spaceId) {
			return
		}
		choiceSpace.value = spaceId
		doGetPageList(null)
	}
	const rightAsideWidthChange = (width) => {
		storeDisplay.viewMenuWidth = width
	}
</script>

<style>
	html,
	body {
		margin: 0;
		padding: 0;
		height: 100%;
	}

	.global-layout-vue {
		height: 100%;
	}

	.hidTree {
		display: none;
	}

	#app,
	.el-container,
	.el-menu {
		height: 100%;
	}

	.el-header {
		background-color: #1d4e89 !important;
	}

	.header-right-user-name {
		color: #fff;
		padding-right: 5px;
		vertical-align: middle;
	}

	.el-header {
		color: #333;
		line-height: 40px;
		height: 40px !important;
	}

	.fold-btn {
		color: #ccc !important;
		font-size: 18px;
	}

	.head-icon {
		margin-right: 15px;
		font-size: 16px;
		cursor: pointer;
		color: #fff;
		vertical-align: middle;
	}

	.header-user-message .page-info-box {
		text-align: right;
		margin-top: 10px;
	}

	.upgrade-info {
		max-height: 150px;
		overflow-y: auto;
		word-break: break-all;
		white-space: pre-wrap;
		line-height: 26px;
	}

	.search-option-item {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.search-option-item .title {
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.search-option-item .content {
		font-size: 12px;
		color: #888;
	}

	.search-autocomplete {
		width: 600px !important;
	}
</style>

<style lang="scss">
.space-folder-box {
  margin-left: 10px;
  margin-bottom: 10px;
  position: relative;

  .folder-action-dropdown-btn {
	padding: 0 8px;
	height: 25px;
	position: absolute;
	right: 0;
  }
}

.wiki-page-tree-box {
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 30px;

  .el-tree-node__content {
	height: 35px;
	position: relative;

	.page-tree-node {
	  width: 100%;

	  .label {
		.el-icon {
		  vertical-align: middle;
		}

		.text {
		  margin-left: 5px;
		  vertical-align: middle;

		  max-width: calc(100% - 40px);
		  display: inline-block;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap;
		}
	  }

	  .rename-input {
	    width: 90%;
	  }

	  .page-action-box {
		position: absolute;
		right: 0;
		top: 0;
		height: 35px;
		line-height: 35px;
		background: #fff;
	    border-radius: 4px;
	    display: none;

		.page-action-dropdown-btn {
		  padding: 0 8px;
		  height: 35px;
		  margin-top: -1px;
		}

		.el-button+.el-button {
		  margin-left: 0;
		}
	  }

	  .page-action-box.renaming {
		display: none !important;
	  }
	}

	&:hover .page-action-box {
	  display: block;
	}
  }
}
</style>
